<template>
  <view class="chart-wrapper" :style="wrapperStyle">
    <view class="left-list">
      <view v-for="(item, index) in leftList" :key="index" class="left-item"
        :class="{ active: index === selectedIndex }" :style="{
          borderLeftColor: item.color || '#74c050'
        }" @click="handleClick(index)">
        <view v-if="selectedIndex === index" class="line-indicator"
          :style="{ backgroundColor: item.color || '#74c050' }"></view>

        <view class="item-text">
          <text class="title">{{ item.title }}</text>
          <text class="subtitle">{{ item.subtitle }}</text>
        </view>
      </view>
    </view>

    <view class="right-panel">
      <canvas v-if="!noData" class="chart-canvas" id="myChartCanvas" canvas-id="myChartCanvas"
        @touchstart="handleTouchstart" @touchmove="handleTouchmove" @touchend="handleTouchend"></canvas>
      <view v-else class="no-data">
        暂无数据
      </view>
    </view>
  </view>
</template>

<script>
import uCharts from '@qiun/ucharts';

export default {
  name: 'ChartCard',
  props: {
    leftList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      selectedIndex: 0,    // 选中的左侧按钮下标
      chartInstance: null, // uCharts实例
      noData: false,       // 是否无数据
    };
  },
  computed: {
    // 容器高度 = leftList.length * 60px
    wrapperStyle() {
      const totalHeight = this.leftList.length * 60; // 每个按钮60px
      return `height: ${totalHeight}px;`;
    },
    // 当前选中的chartData
    selectedChartData() {
      if (!this.leftList.length) return null;
      const item = this.leftList[this.selectedIndex];
      return item && item.chartData ? item.chartData : null;
    },
  },
  watch: {
    // 切换时重新渲染
    selectedChartData: {
      immediate: true,
      handler(newVal) {
        this.renderChart(newVal);
      },
    },
  },
  methods: {
    // 点击左侧按钮
    handleClick(index) {
      if (index !== this.selectedIndex) {
        this.selectedIndex = index;
      }
    },
    // 渲染或更新图表
    renderChart(chartData) {
      if (
        !chartData ||
        !Array.isArray(chartData.series) ||
        !chartData.series.length
      ) {
        this.noData = true;
        // 如果需要销毁之前的图表，可在此处理
        return;
      }
      this.noData = false;

      // 是否已有实例
      if (this.chartInstance) {
        this.updateChart(chartData);
      } else {
        this.initChart(chartData);
      }
    },

    // 首次初始化图表
    initChart(chartData) {
      // 1) 获取Canvas上下文
      const ctx = uni.createCanvasContext('myChartCanvas', this);
      // 2) 计算Canvas的px尺寸
      const cWidth = uni.upx2px(500);
      const cHeight = uni.upx2px(300);

      this.chartInstance = new uCharts({
        canvasId: 'myChartCanvas',
        context: ctx,
        type: 'line',
        width: cWidth,
        height: cHeight,
        categories: chartData.categories || [],
        series: chartData.series || [],
        dataLabel: true,
        legend: true,
        color: ['#74c050', '#f37b1d', '#409eff'], // 仅举例
        background: '#1f1f1f',
      });
    },

    // 更新图表数据
    updateChart(chartData) {
      this.chartInstance.updateData({
        categories: chartData.categories,
        series: chartData.series,
      });
    },

    // 触摸交互
    handleTouchstart(e) {
      if (!this.chartInstance) return;
      this.chartInstance.touchLegend(e);
      this.chartInstance.showToolTip(e);
    },
    handleTouchmove(e) {
      if (!this.chartInstance) return;
      this.chartInstance.showToolTip(e);
    },
    handleTouchend(e) {
      // 一般可不做处理
    },
  },
};
</script>

<style scoped>
.chart-wrapper {
  display: flex;
  flex-direction: row;
  background-color: #2b2b2b;
  border-radius: 8px;
  overflow: hidden;
  /* 让圆角生效 */
  margin: 10px 15px 0px 15px;
  /* 可按需调整 */
}

/* 左侧列表 */
.left-list {
  width: 120px;
  /* 可根据设计调整 */
  background-color: #1c1f21;
  display: flex;
  flex-direction: column;
  /* 让内部 item 从上到下排布 */
}

.left-item {
  height: 60px;
  line-height: 60px;
  display: flex;
  align-items: center;
  /* 未选中时隐藏 */
  padding-left: 8px;
  background-color: rgb(28, 31, 33);
}

.left-item:last-child {
  margin-bottom: 0;
}

.left-item.active {
  background-color: rgb(51, 56, 58);
}

/* 文本 */
.item-text {
  display: flex;
  flex-direction: column;
}

.title {
  color: #b8ffc8;
  font-size: 12px;
  font-weight: 500;
  height: 20px;
  line-height: 20px;
}

.subtitle {
  color: #fff;
  font-size: 10px;
  height: 20px;
  line-height: 20px;
}

/* 右侧图表 */
.right-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.chart-canvas {
  width: 100%;
  height: 100%;
}

.no-data {
  color: #666;
  font-size: 14px;
  text-align: center;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 左侧彩条 */
.line-indicator {
  width: 4px;
  height: 30px;
  background-color: #74c050;
  margin-right: 6px;
  border-radius: 2px;
}
</style>